<template>
    <div class="home-wrapper">
        <div class="flex-box">
            <Card title="今日注册量" class="small-card">
                <div class="card-content">
                    <div class="content-left">
                        <Icon name="el-Histogram" color="#bfa"></Icon>
                        <span>2013</span>
                    </div>
                    <span>+22%</span>
                </div>
            </Card>
            <Card title="会员总数" class="small-card">
                <div class="card-content">
                    <div class="content-left">
                        <Icon name="el-Histogram" color="#ad85f4"></Icon>
                        <span>1234</span>
                    </div>
                    <span>+18%</span>
                </div>
            </Card>
            <Card title="今日访问量" class="small-card">
                <div class="card-content">
                    <div class="content-left">
                        <Icon name="el-Histogram" color="#8595f4"></Icon>
                        <span>1238</span>
                    </div>
                    <span>+15%</span>
                </div>
            </Card>
            <Card title="会员总数" class="small-card">
                <div class="card-content">
                    <div class="content-left">
                        <Icon name="el-Histogram" color="#f48595"></Icon>
                        <span>4498</span>
                    </div>
                    <span>+28%</span>
                </div>
            </Card>
        </div>

        <div class="flex-box twoRow">
            <!-- 用户增长情况折线图 -->
            <BaseECharts ref="userLineEChartsRef" class="base-echart-card" height="350px"></BaseECharts>
            <!-- 访问增长情况柱状图 -->
            <BaseECharts ref="browseBarEChartsRef" class="base-echart-card" height="350px"></BaseECharts>
            <!-- 实时访问量水球图 -->
            <BaseECharts ref="liquidfillEChartsRef" class="base-echart-card" height="350px"></BaseECharts>
        </div>
        <div class="flex-box">
            <!-- 文件类型占比雷达图 -->
            <BaseECharts ref="fileRadarEChartsRef" class="base-echart-card" height="500px"></BaseECharts>
            <!-- 专题模型下载情况饼图 -->
            <BaseECharts ref="downloadPicEChartsRef" class="base-echart-card" height="500px"></BaseECharts>
        </div>
    </div>
</template>

<script setup lang="ts">
import type { ECOption } from '@/components/baseECharts/config'
import { BaseEchartsType } from '@/components/baseECharts/type'
import { RadarSeriesOption } from 'echarts/charts'

const userLineEChartsRef = ref<BaseEchartsType>()
const browseBarEChartsRef = ref<BaseEchartsType>()
const fileRadarEChartsRef = ref<BaseEchartsType>()
const downloadPicEChartsRef = ref<BaseEchartsType>()
const liquidfillEChartsRef = ref<BaseEchartsType>()

onMounted(() => {
    setUserLineOption()
    setBrowseBarOption()
    setFileRadarOption()
    setDownloadPicOption()
    setLiquidfillOption()
})

const monthArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
const categories = [
    '给排水管件合集',
    '给排水设备合集',
    '给排水消防系统合集',
    '暖通管件合集',
    '暖通设备合集',
    '施工场地布置合集',
    '施工机械设备合集',
    '施工安全设备合集',
    '办公环境布置合集',
    '居家环境布置合集',
    '防火门系列',
    '无障碍设施',
]

const generateData = (baseValue: number, year: number) => {
    const peaks = [3, 6, 9] // 指定3/6/9月为促销月
    const data = []
    const amplitude = 50 // 主波动幅度
    for (let m = 0; m < 12; m++) {
        // 基础波形：每年3个完整正弦周期
        const baseWave = Math.sin((m * Math.PI * 3) / 12) * amplitude
        // 促销增幅：3/6/9月叠加随机增幅
        const promotion = peaks.includes(m) ? 30 + Math.random() * 20 : 0
        // 年度增长：每年基准提升80%
        const growth = baseValue * (1 + year * 0.8)
        // 合成数据（含±15%随机扰动）
        const value = growth + baseWave + promotion + (Math.random() - 0.5) * growth * 0.15
        data.push(Math.max(50, Math.round(value)))
    }
    return data
}
const colorList = [
    {
        x: 0,
        y: 1,
        x2: 0,
        y2: 0,
        colorStops: [
            { offset: 0, color: '#FEC73580' },
            { offset: 1, color: '#FEC735' },
        ],
    },
    {
        x: 0,
        y: 1,
        x2: 0,
        y2: 0,
        colorStops: [
            { offset: 0, color: '#4AC5FF80' },
            { offset: 1, color: '#4AC5FF' },
        ],
    },
    {
        x: 0,
        y: 1,
        x2: 0,
        y2: 0,
        colorStops: [
            { offset: 0, color: '#EC33A280' },
            { offset: 1, color: '#EC33A2' },
        ],
    },
]
const setUserLineOption = () => {
    const option: ECOption = {
        //标题组件
        title: {
            text: '会员增长情况',
        },
        xAxis: [
            {
                type: 'category',
                //两侧不留白
                boundaryGap: false,
                //分割线
                splitLine: { show: false },
                axisLabel: { color: '#fff' },
                //轴线
                axisLine: { show: true },
                //刻度
                axisTick: { show: false },
                data: monthArr,
            },
        ],
        yAxis: [
            {
                type: 'value',
                //分割线
                splitLine: { show: false },
                //轴线的设置
                axisLine: { show: true },
                axisLabel: { color: '#fff' },
                //刻度
                axisTick: { show: false },
            },
        ],
        grid: {
            top: '15%',
            left: '3%',
            right: '3%',
            bottom: '3%',
            containLabel: true,
        },
        // 图例
        legend: {
            top: '2%',
            right: '8%',
            // 图例水平布局
            orient: 'horizontal',
            data: ['2022年', '2023年', '2024年'],
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985',
                },
            },
        },
        toolbox: {
            feature: {
                saveAsImage: {},
            },
        },
        series: [
            {
                name: '2022年',
                type: 'line',
                data: generateData(100, 2),
                //平滑曲线的设置
                smooth: true,
                showSymbol: false,
                lineStyle: { width: 1 },
                //区域填充样式
                areaStyle: { opacity: 1 },
            },
            {
                name: '2023年',
                type: 'line',
                data: generateData(100, 1),
                //平滑曲线的设置
                smooth: true,
                showSymbol: false,
                lineStyle: { width: 1 },
                //区域填充样式
                areaStyle: { opacity: 1 },
            },
            {
                name: '2024年',
                type: 'line',
                data: generateData(100, 0),
                //平滑曲线的设置
                smooth: true,
                showSymbol: false,
                lineStyle: { width: 1 },
                // //区域填充样式
                areaStyle: { opacity: 1 },
            },
        ],
    }
    userLineEChartsRef.value?.setOption(option)
}

const setBrowseBarOption = () => {
    const option: ECOption = {
        //标题组件
        title: {
            text: '访问增长情况',
        },

        xAxis: [
            {
                type: 'category',
                //刻度
                axisTick: { show: false },
                data: monthArr,
            },
        ],
        yAxis: [
            {
                type: 'value',
                splitLine: {
                    lineStyle: {
                        type: 'dashed',
                    },
                },
            },
        ],
        grid: {
            top: '15%',
            left: '3%',
            right: '6%',
            bottom: '3%',
            containLabel: true,
        },
        // 图例
        legend: {
            top: '2%',
            right: '8%',
            // 图例水平布局
            orient: 'horizontal',
            data: ['2022年', '2023年', '2024年'],
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
            },
        },
        toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar', 'stack'] },
                restore: { show: true },
                saveAsImage: { show: true },
            },
        },

        series: [
            {
                name: '2022年',
                type: 'bar',
                barGap: 0,
                emphasis: {
                    focus: 'series',
                },
                data: generateData(100, 0),
            },
            {
                name: '2023年',
                type: 'bar',
                barGap: 0,
                emphasis: {
                    focus: 'series',
                },
                data: generateData(100, 1),
            },
            {
                name: '2024年',
                type: 'bar',
                barGap: 0,
                emphasis: {
                    focus: 'series',
                },
                data: generateData(100, 2),
            },
        ],
    }
    browseBarEChartsRef.value?.setOption(option)
}
const setFileRadarOption = () => {
    const option: ECOption = {
        //标题组件
        title: {
            text: '文件类型占比情况',
        },
        // 图例
        legend: {
            type: 'scroll',
            orient: 'vertical',
            right: 20,
            top: 20,
            bottom: 20,
            data: (() => {
                const list = []
                for (let i = 1; i <= 28; i++) {
                    list.push(i + 2000 + '')
                }
                return list
            })(),
        },
        tooltip: { trigger: 'item' },
        toolbox: {
            feature: {
                saveAsImage: {},
            },
        },
        visualMap: {
            top: 'middle',
            left: 10,
            color: ['red', 'yellow'],
            calculable: true,
        },
        radar: {
            indicator: [
                { text: '图片', max: 400 },
                { text: '文档', max: 400 },
                { text: '视频', max: 400 },
                { text: '音频', max: 400 },
                { text: '模型', max: 400 },
                { text: '其他', max: 400 },
            ],
        },
        series: (() => {
            const series = []
            for (let i = 1; i <= 28; i++) {
                series.push({
                    type: 'radar',
                    symbol: 'none',
                    lineStyle: {
                        width: 1,
                    },
                    emphasis: {
                        areaStyle: {
                            color: 'rgba(0,250,0,0.3)',
                        },
                    },
                    data: [
                        {
                            value: [(40 - i) * 10, (38 - i) * 4 + 60, i * 5 + 10, i * 9, (i * i) / 2],
                            name: i + 2000 + '',
                        },
                    ],
                })
            }
            return series as RadarSeriesOption
        })(),
    }
    fileRadarEChartsRef.value?.setOption(option)
}
const setDownloadPicOption = () => {
    const option: ECOption = {
        //标题组件
        title: {
            text: '各专题模型下载情况',
        },
        legend: {
            type: 'scroll',
            orient: 'vertical',
            right: 10,
            top: 'center',
            data: categories,
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)',
        },
        toolbox: {
            feature: {
                saveAsImage: {},
            },
        },
        series: [
            {
                name: '专题',
                type: 'pie',
                radius: '55%',
                center: ['40%', '50%'],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 0,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)',
                    },
                },

                data: (() => {
                    const dataArr: any[] = []
                    categories.forEach((item) => {
                        dataArr.push({
                            name: item,
                            value: Math.round(Math.random() * 100000),
                        })
                    })
                    return dataArr
                })(),
            },
        ],
    }
    downloadPicEChartsRef.value?.setOption(option)
}
const setLiquidfillOption = () => {
    const option = {
        title: [
            {
                text: '实时在线用户',
            },
        ],
        toolbox: {
            feature: {
                saveAsImage: {},
            },
        },
        series: [
            {
                type: 'liquidFill',
                radius: '50%',
                center: ['50%', '50%'],
                color: ['#c1dce7', '#90d3f0', '#009bdb'],
                data: [0.6, { value: 0.5, direction: 'left' }, 0.4, { value: 0.3, direction: 'left' }],
                backgroundStyle: {
                    borderWidth: 0,
                    color: 'transparent',
                },
                label: { fontSize: 30 },
                outline: {
                    show: true,
                    borderWidth: 10,
                    borderDistance: 10,
                },
            },
        ],
    }
    liquidfillEChartsRef.value?.setOption(option as ECOption)
}
</script>

<style lang="scss" scoped>
.home-wrapper {
    margin: 20px;
    width: calc(100% - 40px);

    .flex-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
        margin-top: 20px;

        &.twoRow {
            > div {
                &:not(:last-child) {
                    flex: 1;
                }
                &:last-child {
                    flex: 0.5;
                }
            }
        }

        .small-card {
            &:hover {
                transform: scale(1.03);
            }

            .card-content {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top: 20px;

                .content-left {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    gap: 5px;
                    font-size: 30px;

                    i {
                        font-size: 30px;
                    }
                }
            }
        }

        .base-echart-card {
            border: none;
            border-radius: 4px;
            background-color: var(--el-bg-color-overlay);
            padding: 20px;
            box-shadow: var(--el-box-shadow-lighter);
            transition: all 0.3s;

            &:hover {
                box-shadow: var(--el-box-shadow);
            }
        }
    }
}
</style>
